/*main*/
.c-wrapper {
  width: 100%;
  height: 100vh;
  .c-left-wrapper {
    height: 100vh;
    background-color: $c-color-primary;
    float: left;
    display: block;
    .c-header-profile {
      width: 230px;
      height: 125px;
      margin-top: 20px;
      text-align: center;
      img {
        width: 88px;
        height: 88px;
        -webkit-box-shadow: $c-img-shadow;
        box-shadow: $c-img-shadow;
        -moz-box-shadow:$c-img-shadow;
        cursor: pointer;
      }
      .c-user-profile {
        margin-top: 5px;
        & > span {
          color: $c-color-gray-primary;
          font-weight: bold;
          font-size: 15px;
          cursor: pointer;
        }
      }
      .dropdown-menu {
        margin-left: 43px;
        .dropdown-item {
          height: 35px;
          line-height: 0px;
          cursor: pointer;
        }
      }
    }
    .c-nav-search {
      padding-left: 13px;
      padding-right: 13px;
      padding-bottom: 15px;
      padding-top: 10px;
      input {
        background-color: $c-color-secondary;
        border: 1px solid $c-color-secondary;
        color: $c-color-gray-deep;
        font-size: 15px;
        &:focus{
           border: 1px solid $c-color-light;
        }
        &::-webkit-input-placeholder {
          color: $c-color-gray-deep !important;
        }
        &:-moz-placeholder {
          color: $c-color-gray-deep !important;
        }
        &::-moz-placeholder {
          color: $c-color-gray-deep !important;
        }
        &:-ms-input-placeholder {
          color: $c-color-gray-deep !important;
        }
      }
      button {
        color: $c-color-gray-deep;
        background-color: $c-color-secondary;
        font-size: 15px;
        border: 1px solid $c-color-secondary;
        &:focus{
           border: 1px solid $c-color-light;
        }
      }
    }
    .c-nav {
      overflow-y: auto;
      margin-left: 0px;
      height: -moz-calc(100vh - 265px);
      height: -webkit-calc(100vh - 265px);
      height: calc(100vh - 265px);
      padding-left: 8px;
      padding-right: 5px;
      font-size: 15px;
      .c-search-msg {
        color: $c-color-gray-deep;
        margin-left: 13px;
      }
    }
  }
  .c-left-wrapper-o {
    width: 230px;
  }
  .c-left-wrapper-c {
    width: 0px;
    display: none;
  }
  .c-header {
    height: 59px;
    background-color: $c-color-secondary;
    border-bottom:1px solid $c-color-secondary;
    & > img {
      margin-left: 15px;
      border-radius: 50%;
      -webkit-box-shadow: $c-header-shadow;
      box-shadow: $c-header-shadow;
      -moz-box-shadow: $c-header-shadow;
      background-color: $c-color-deep;
      &:hover {
        -moz-transition: all 0.5s ease-in-out;
        -webkit-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
        -moz-transform: rotateY(-360deg);
        -webkit-transform: rotateY(-360deg);
        -o-transform: rotateY(-360deg);
        -ms-transform: rotateY(-360deg);
        transform: rotateY(-360deg);
      }
    }
    & > h3 {
      display: inline-block;
      vertical-align: -5px;
      margin-top: 15px;
      color: $c-color-gray-secondary;
      font-size: 1.7em;
    }
  }
  .c-right-wrapper {
    height: 100vh;
    background-color: $c-color-white-gray;
    .c-header {
      background-color: $c-color-white;
      height: 60px;
      line-height: 60px;
      -webkit-box-shadow: $c-header-shadow;
      box-shadow: $c-header-shadow;
      -moz-box-shadow: $c-header-shadow;
      border-bottom:1px solid $c-color-gray-deep;
      .c-title {
        padding-left: 15px;
        float: left;
        button {
          vertical-align: 0px;
          padding-top: 5px;
          padding-bottom: 5px;
          padding-left: 6px;
          padding-right: 6px;
          cursor: pointer;
          border-radius: 1px;
        }
        h3 {
          font-size: 1.2em;
          font-weight: bold;
          color: $c-color-black-primary;
          margin-left: 8px;
          vertical-align: -1px;
          display: inline-flex;
        }
      }
      .c-tools {
        position: inherit;
        padding-right: 25px;
        .nav-pills {
          .c-item {
            padding-left: 15px;
            padding-right: 15px;
            transition: 0.35s;
            -moz-transition: 0.35s;
            -webkit-transition: 0.35s;
            -o-transition: 0.35s;
            float: left;
            font-size: 15px;
            &:hover {
              background: $c-color-white-gray;
              cursor: pointer;
            }
          }
          .c-user {
            padding-left: 16px;
            padding-right: 6px;
            margin-left: 10px;
            width: 139px;
            cursor: pointer;
            img {
              width: 32px;
              height: 32px;
              border-radius: 50%;
              margin-top: -3px;
            }
            .dropdown-menu {
              .dropdown-item {
                height: 35px;
                line-height: 0px;
                cursor: pointer;
              }
            }
          }
        }
      }
    }
    .c-content {
      overflow-y: scroll;
      width: 100%;
      padding-top: 10px;
      padding-bottom: 10px;
      height: calc(100vh-61px);
      height: -moz-calc(100vh - 61px);
      height: -webkit-calc(100vh - 61px);
      height: calc(100vh - 61px);
      .c-content-inner{
          margin-left:15px;
          margin-right:15px;
          margin-bottom: 15px;
          margin-top: 5px;
          background-color: $c-color-white;
          border: 0px;
          border-radius: 1px;
          -webkit-box-shadow: $c-box-shadow;
          box-shadow: $c-box-shadow;
          -moz-box-shadow:  $c-box-shadow;
          padding:15px;
      }
    }
  }
  .c-right-wrapper-o {
    margin-left: 230px;
  }
  .c-right-wrapper-c {
    margin-left: 0px;
  }
}
.c-left-wrapper {
  .c-nav {
    .c-sidebar-menu {
      list-style: none;
      margin: 0;
      padding: 0;
      a {
        color: $c-color-gray-deep;
        text-decoration: none;
        border: 0px;
      }
      & > li {
        position: relative;
        margin: 0;
        padding: 0;
        & > a {
          padding: 8px 5px 8px 15px;
          display: block;
          border-left: 3px solid transparent;
          color: $c-color-gray-deep;
          border: 0px;
          &:hover {
            color: $c-color-white;
            -webkit-transition: 0.3s;
            transition: 0.3s;
            -moz-transition: 0.3s;
            -webkit-transition: 0.3s;
            -o-transition: 0.3s;
            cursor: pointer;
            filter: alpha(opacity=35);
            -moz-opacity: 0.35;
            opacity: 0.35;
            margin-left: 5px;
          }
          & > .fa {
            width: 20px;
          }
        }
        & > .c-treeview-menu {
          margin: 0 1px;
        }
      }
      li {
        &.active {
          & > .c-treeview-menu {
            display: block;
          }
        }
      }
      .c-treeview-menu {
        display: block;
        list-style: none;
        padding: 0;
        margin: 0;
        padding-left: 15px;
        .c-treeview-menu {
          padding-left: 15px;
        }
        & > li {
          margin: 0;
          margin-left: 2px;
          border-left: 1px solid $c-color-light;
          padding-left: 5px;
          & > a {
            padding: 5px 5px 8px 15px;
            display: block;
            color: $c-color-gray-deep;
            border: 0px;
            & > .fa {
              width: 20px;
            }
          }
        }
      }
    }
  }
}
.c-left-wrapper  .c-nav .c-sidebar-menu > li:hover > a, .c-sidebar-menu > li.active > a {
  color: $c-color-gray-deep;
  border: 0px;
}
.c-left-wrapper  .c-nav .c-sidebar-menu .c-treeview-menu > li.active > a, .c-sidebar-menu .c-treeview-menu > li > a:hover {
  color: $c-color-white;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  cursor: pointer;
  filter: alpha(opacity=35);
  -moz-opacity: 0.35;
  opacity: 0.35;
  margin-left: 5px;
}

.c-avatar-cut-box{
   background: #c0c0c0;
   width:600px;
   height:380px;
   float: left;
}

.c-avatar-preview-box{
      width:150px;
      height:380px;
      float: left;
    .c-avatar-title{
      font-style: 16px;
    }
    .c-avatar-desc{
      font-size: 14px;
      color:$c-color-black-secondary
    }
    .c-avatar-img-lg{
        width:90px;
        height:90px;
    }
    .c-avatar-img-xs{
        width:36px;
        height:36px;
     }
}


